<script>
import {Search} from "@element-plus/icons-vue";
import LoginDialog from "@/components/LoginDialog.vue";
import axios from "axios";
import {getBaseUrl} from "@/js/common.js";
import {getToken, toUserContent} from "@/js/userUtils.js";

export default {
  name: "HomeMenu",
  components: {LoginDialog},
  computed: {
    Search() {
      return Search
    }
  },
  data() {
    return {
      search: '',
      user: null
    }
  },
  created() {
    this.getCurentUser()
  },
  methods: {
    toUserContent,
    searchList() {
      this.$emit('searchList', this.search)
    },
    getCurentUser(){
      axios.get(getBaseUrl('userCenter') + '/user/getCurrentUser',{headers: {'massToken': getToken()}}).then(res => {
        if (res.data.code === 200) {
          this.user = res.data.data
        }
      })
    },
    logout(){
      axios.get(getBaseUrl('userCenter') + '/user/logout',{headers: {'massToken': getToken()}}).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '退出成功',
            type: 'success'
          });
          this.user = null
          sessionStorage.removeItem('massToken')
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<template>
  <div style="width: 80%">
    <div class="home-menu fall-in">
      <el-row>
        <el-col span="12" class="search-col">
          <el-input placeholder="请输入内容" v-model="search" style="width: 40%">
            <template #prepend><el-button type="primary" :icon="Search" @click="searchList"></el-button></template>
          </el-input>
        </el-col>
        <el-col span="12" class="user-col">
          <el-dropdown>
            <el-avatar shape="square" :src="user ? user.picture : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="!user" @click="$refs.loginDialog.dialogVisible=true">登录</el-dropdown-item>
                <el-dropdown-item v-if="!user">注册</el-dropdown-item>
                <el-dropdown-item v-if="user" @click="toUserContent()">个人中心</el-dropdown-item>
                <el-dropdown-item v-if="user" @click="logout"><el-text type="danger">退出登录</el-text></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
    <LoginDialog ref="loginDialog" />
  </div>
</template>

<style scoped>
.home-menu{
  position: relative;
  background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 磨砂效果 */
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选：添加阴影 */
  padding: 20px;
}

.search-col{
  width: 60%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.user-col{
  width: 38%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fall-in {
  opacity: 0;
  transform: translateY(-100px);
  animation: fallIn 1s ease forwards;
}

@keyframes fallIn {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
